<template>
  <div id="map"></div>
</template>

<script setup lang="ts">
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { onMounted } from "vue";
import { fromLonLat } from "ol/proj";
import { useStore } from "vuex";

const store = useStore();

const initMap = () => {
  const map = new Map({
    controls: [],
    view: new View({
      center: fromLonLat([110, 38]),
      zoom: 5,
    }),
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    target: "map",
  });
  store.commit("setMap", map);
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
#map {
  height: 100vh;
}
</style>